<script setup>
import { ref, computed } from "vue";
import { manageGetAllFoods, manageAddSetmealDish } from "@/api/manage";
import { useRoute } from "vue-router";
import { ElMessage } from 'element-plus'
import { useRouter } from "vue-router";

const dishList = ref([{
  dishId: '',
  number: ''
}])
const allFoodsList = ref([])
const getAllFoods = async () => {
  const { result } = await manageGetAllFoods()
  allFoodsList.value = result
}
getAllFoods()
// 创建菜品
const addDish = () => {
  dishList.value.push({
    dishId: '',
    number: ''
  })
}

const disabledFoods = computed(() => {
  const selectedIds = dishList.value.map(item => item.dishId).filter(id => id);
  return selectedIds;
})

const changeDisable = (value) => {
  // 3. 处理新选中的菜品，设置为禁用
  if (value) { // 确保新值存在（避免清空选择时的错误）
    const newIndex = allFoodsList.value.findIndex(item => item.id === value);
    if (newIndex !== -1) { // 校验索引有效性
      allFoodsList.value[newIndex].disabled = true;
    }
  }
}


const deleteDish = (index) => {
  allFoodsList.value[index].disabled = false
  dishList.value.splice(index, 1)

}

const route = useRoute();

const setmealId = route.query.packageId

const router = useRouter();

const addPackageDish = async () => {
  // 处理数据
  const dbSetmealDish = []
  for (let i = 0; i < dishList.value.length; i++) {
    const { id, name, price } = allFoodsList.value.find(item => item.id == dishList.value[i].dishId)
    const totalPrice = price * dishList.value[i].number
    dbSetmealDish.push({ id, name, totalPrice, setmealId })
  }
  await manageAddSetmealDish(dbSetmealDish)
  ElMessage.success("该套餐菜品添加成功")
  router.back()
}
</script>

<template>
  <div>
    <el-container>
      <el-header>
        <el-text type="info">
          <h1>提交套餐菜品</h1>
        </el-text>
      </el-header>
      <el-main>
        <el-form :model="dishList">
          <div class="dish-item" v-for="(item, index) in dishList" :key="index">
            <el-form-item label="选择菜品和数量：">
              <el-select v-model="item.dishId" @change="changeDisable" clearable>
                <el-option v-for="(item, index) in allFoodsList" :key="index" :label="item.name" :value="item.id"
                  :disabled="disabledFoods.includes(item.id)"></el-option>
              </el-select>
              <el-input-number :min="1" v-model="item.number"></el-input-number>
              <el-button type="danger" v-if="dishList.length !== 1" @click="deleteDish(index)">删除</el-button>
            </el-form-item>
          </div>

          <el-form-item>
            <el-button type="primary" @click="addDish">添加菜品</el-button>
            <el-button type="success" style="margin-left: 10px" @click="addPackageDish">
              提交套餐
            </el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>

<style scoped>
h1 {
  text-align: center;
  height: 100%;
  line-height: 60px;
  background-color: rgb(179, 225, 157);
}

.dish-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  justify-content: center;
}

:deep(.el-select) {
  width: 200px;
}

:deep(.dish-item .el-form-item__content) {
  gap: 20px;
}

:deep(.el-form-item__content) {
  justify-content: center;
}
</style>
